<template>
	<BasicModal v-bind="$attrs" @register="register" title="Modal Title" :width="1000">
		<div class="pt-3px pr-3px">
			<BasicTable @register="registerTable"></BasicTable>
		</div>
	</BasicModal>
</template>
<script lang="ts" setup>
// import { ref } from 'vue';
import { BasicModal, BasicTable } from '#/components';
import { useModalInner, useTable } from '#/hooks';
import { getDetailById } from '@/api/demo/table';

const columns = [
	{
		title: '序号',
		dataIndex: 'id',
	},
	{
		title: '传入的id',
		dataIndex: 'queryId',
	},
	{
		title: '姓名',
		dataIndex: 'name',
	},
	{
		title: '地址',
		dataIndex: 'address',
	},
];

const [register] = useModalInner(data => {
	console.log(data);
	// 表格查询带上动态数据
	reload({ searchInfo: { id: data.id }, keyWordInfo: { address: 'hongkong' } });
});

const [registerTable, { reload }] = useTable({
	columns,
	api: getDetailById,
	immediate: false,
	searchInfo: { name: '12313' },
	keyWordInfo: { age: 12 },
});
</script>
